<template>
  <div class="container">
    <div class="navigation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>学科管理</el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>标签管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="demo-input-suffix">
      <div>
        目录名称
        <el-input v-model="input" style="width: 200px"></el-input>
        <span class="statu">状态</span>
        <el-select v-model="value" placeholder="请选择" style="width: 230px">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button class="clear" @click="clear">清除</el-button>
        <el-button type="primary" @click="searchTag">搜索</el-button>
      </div>
      <div class="buttom">
        <a href="javascript:;" class="el-icon-back" @click="goBack">
          返回学科</a
        >
        <el-button type="success" class="el-icon-edit" @click="addTag">
          新增目录</el-button
        >
      </div>
    </div>
    <div class="data">
      <i class="el-icon-info"></i>
      <span>数据一共{{ page.total }}条</span>
    </div>
    <div class="main">
      <el-table
        :data="list"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
      >
        <el-table-column type="index" prop="id" label="序号" width="80">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科" width="180">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column label="创建日期">
          <template slot-scope="list">
            {{ list.row.addDate | parseTime }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{ row }">
            <span v-if="row.state === 1">已启用</span>
            <span v-if="row.state === 0">已禁用</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="180">
          <div class="enable" slot-scope="{ row }" v-if="row.state === 0">
            <a href="javascript:;" @click="changeState(row)">启用</a>
            <a href="javascript:;" @click="changeTag(row)">修改</a>
            <a href="javascript:;" @click="delTag(row)">删除</a>
          </div>
          <div class="operations" v-else>
            <a href="javascript:;" class="forbidden" @click="changeState(row)"
              >禁用</a
            >
            <a href="javascript:;">修改</a>
            <a href="javascript:;">删除</a>
          </div>
        </el-table-column>
      </el-table>
    </div>
    <el-row type="flex" justify="end" style="height: 50px" align="middle">
      <el-pagination
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        :total="page.total"
        background
        @current-change="changePage"
        @size-change="changePageSize"
        layout="prev, pager, next, sizes, jumper"
      >
      </el-pagination>
    </el-row>
    <addTag :showDialog="showAdd" @change="change"></addTag>
    <tags-modication
      :showModication="showTag"
      :editTags="editTags"
      @modication="modication"
    ></tags-modication>
  </div>
</template>

<script>
import { list, remove, changeState } from "@/api/hmmm/tags";
import addTag from "../components/tags-add.vue";
import dayjs from "dayjs";
import TagsModication from "../components/tags-modication.vue";
export default {
  components: {
    addTag,
    TagsModication,
  },
  data() {
    return {
      options: [
        { value: "1", label: "已启用" },
        { value: "0", label: "已禁用" },
      ],
      page: {
        page: 1,
        pagesize: 10,
        total: 0,
        tagName: "",
        state: null,
      },
      list: [],
      value: "",
      input: null,
      showAdd: false,
      showTag: false,
      editTags: {
        id: "",
        subjectID: "",
        tagName: "",
      },
    };
  },
  methods: {
    clear() {
      this.input = "";
      this.value = null;
    },

    async getTags() {
      const result = await list(this.page);
      this.list = result.data.items;
      this.page.total = result.data.counts;
    },
    async searchTag() {
      // console.log(this.value);
      // console.log(this.list);
      this.page.tagName = this.input;
      this.page.state = this.value;
      this.$message.success("搜索成功");
      this.getTags();
    },
    changePage(newPage) {
      this.page.page = newPage;
      this.getTags();
    },
    changePageSize(newpage) {
      this.page.pagesize = newpage;
      this.getTags();
    },
    goBack() {
      this.$router.push("/subjects/list");
    },
    addTag() {
      this.showAdd = true;
    },
    change() {
      this.showAdd = false;
      this.getTags();
    },
    modication() {
      this.showTag = false;
      this.getTags();
    },
    async delTag(id) {
      await remove(id);
      this.$message.success("删除标签成功");
      this.getTags();
    },
    async changeState(data) {
      if (data.state === 1) {
        data.state = 0;
        await changeState(data);
        this.$message.success("禁用成功");
        this.getTags();
        return;
      } else if (data.state === 0) {
        data.state = 1;
        await changeState(data);
        this.$message.success("启用成功");
        this.getTags();
        return;
      }
    },
    async changeTag(data) {
      this.showTag = true;
      this.editTags = data;
    },
  },
  created() {
    this.getTags();
    // dayjs().format();
  },
};
</script>

<style scoped >
.navigation {
  padding: 15px 25px;
  border: 1px solid #f4f4f5;
}
.container {
  margin: 10px;
  background-color: #fff;
}
.container .demo-input-suffix {
  padding: 25px 25px 25px 43px;
  display: flex;
  justify-content: space-between;
}
.clear {
  margin-left: 10px;
}
.statu {
  margin-left: 40px;
  margin-right: 10px;
  text-align: center;
}
.buttom a {
  color: #07b5fa;
  padding-right: 10px;
}
.data {
  color: #777;
  font-size: 13px;
  margin: 0 25px;
  background-color: #f4f4f5;
  padding: 10px 18px;
  border-radius: 10px;
}
.data span {
  margin-left: 5px;
}
.main {
  margin-top: 20px;
  padding: 0 25px;
}
.operations {
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
}
.operations a {
  color: #bfc2cc;
}
.operations .forbidden {
  color: #07b5fa;
}
.enable {
  display: flex;
  justify-content: space-between;
  padding-right: 50px;
  color: #07b5fa;
}
</style>
